<template>
	<view class="all">
		<view class="head flex_sp">
			<view class="box flex_sp" @click="showpop1()">
				<input type="text" placeholder="年/月/日" v-model="starttime" />
				<image src="../../../static/index/card.png" mode=""></image>
			</view>
			<view class="aline">
				-
			</view>
			<view class="box flex_sp" @click="showpop2()">
				<input type="text" placeholder="年/月/日" v-model="endtime" />
				<image src=" ../../../static/index/card.png" mode=""></image>
			</view>
		</view>
		<view class="body">
			<!-- <view class="one">
				未完结金额(元)
			</view>
			<view class="two flex_sp">
				<view class="left">
					{{lists.record.price}}
				</view>
				<view class="right">
					2017-03.10
				</view>
			</view>
			<view class="solid">

			</view> -->
			<view class="one">
				可提现金额
			</view>
			<view class="two flex_sp">
				<view class="left">
					{{lists.money}}
				</view>
				<view class="right2" @click="tixian()">
					提现
				</view>
			</view>
		</view>
		<view class="last">
			<u-tabs :list="list1" @change="tabs" :scrollable="false"></u-tabs>
			<view class="lists">
				<u-empty v-show="show3" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				<view v-show="!show3" class="box" v-for="(item , index) in lists.record" :key="index">
					<view class="top flex_sp">
						<view class="left">
							{{item.note}}
						</view>
						<view class="right">
							余额：￥{{item.balance}}
						</view>
					</view>
					<view class="bot flex_sp">
						<view class="left">
							<text v-show="item.types==1">+￥</text>
							<text v-show="item.types==2">-￥</text>
							{{item.price}}
						</view>
						<view class="right">
							{{item.create_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="show1" v-model="v1" mode="date" @confirm="confirm1"
			@cancel="cancel1"></u-datetime-picker>
		<u-datetime-picker :show="show2" v-model="v2" mode="date" @confirm="confirm2"
			@cancel="cancel2"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '收入',
				}, {
					name: '支出',
				}],
				tab: 0,
				show1: false,
				v1: Number(new Date()),
				show2: false,
				v2: Number(new Date()),
				starttime: "",
				endtime: "",
				lists: {},
				show3: false
			};
		},
		onLoad() {
			this.getmoney()
		},
		methods: {
			tixian() {
				console.log("131");
				uni.navigateTo({
					url:'/pages/index/withdrawal/withdrawal'
				})
				// uni.navigateTo({
					// url:"../withdrawal/withdrawal"
				// })
			},
			//获取数据
			async getmoney() {
				const res = await this.$api("/business/user/capital_details", 'post', {
					start_time: this.starttime,
					end_time: this.endtime,
					type: this.tab
				}).then(res => {
					console.log(res);
					console.log(res.data.data);
					if (res.data.code == 1) {
						if (res.data.data.record.length == 0) {
							this.show3 = true
						} else {
							this.show3 = false
						}
						// uni.$u.toast(res.data.msg)
						this.lists = res.data.data
					}
				})
			},
			tabs(e) {
				this.tab = e.index
				console.log(e.index);
				this.getmoney()
			},
			showpop1() {
				this.show1 = true
			},
			showpop2() {
				this.show2 = true
			},
			confirm1(e) {
				console.log(e);
				this.show1 = false
				let a = new Date(e.value)
				this.starttime = a.getFullYear() + "-" + a.getMonth() + "-" + a.getDate()
				if (this.starttime && this.endtime) {
					this.getmoney()
				}
			},
			confirm2(e) {
				console.log(e);
				this.show2 = false
				let b = new Date(e.value)
				this.endtime = b.getFullYear() + "-" + b.getMonth() + "-" + b.getDate()
				if (this.starttime && this.endtime) {
					this.getmoney()
				}
			},
			cancel1() {
				this.show1 = false
			},
			cancel2() {
				this.show2 = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 15px;

		.head {
			.aline {
				margin: 0 10px;
			}

			.box {
				padding: 10px;
				border-radius: 5px;
				border: 1px solid #999999;

				image {
					width: 18px;
					height: 18px;
				}

				input {
					font-size: 12px;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.body {
			background: #FB774B;
			border-radius: 10px;
			padding: 10px;
			box-sizing: border-box;
			margin: 20px 0;

			.one {
				font-size: 14px;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0 0 10px 0;
			}

			.two {
				.left {
					font-size: 24px;
					font-weight: 900;
					color: #FFFFFF;
				}

				.right {
					font-size: 12px;
					font-weight: 400;
					color: #FFFFFF;
				}

				.right2 {
					background: #FFFFFF;
					border-radius: 26px;
					padding: 5px 15px;
					text-align: center;
					font-size: 14px;
					font-weight: bold;
					color: #FB774B;
				}
			}

			.solid {
				width: 100%;
				height: 1px;
				background-color: #fff;
				margin: 10px 0;
			}
		}

		.lists {
			.box {
				background: #F5F5F5;
				border-radius: 10px;
				padding: 10px;
				margin: 10px 0;

				.top {
					margin: 10px 0;

					.left {
						font-size: 13px;
						font-weight: bold;
						color: #333333;
					}

					.right {
						font-size: 13px;
						font-weight: bold;
						color: #333333;
					}
				}

				.bot {
					margin: 10px 0;

					.left {
						font-size: 13px;
						font-weight: bold;
						color: #333333;
					}

					.right {
						font-size: 13px;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
</style>